<!--
 * @Description: 
 * @Author: Cxy
 * @Date: 2023-07-10 15:12:39
 * @LastEditors: Cxy
 * @LastEditTime: 2024-03-12 10:07:18
 * @FilePath: \blogAdmin\play\src\components\XyI18n\src\index.vue
-->

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { configStore } from '@/stores/config'
import { langType } from '@/i18n'

defineOptions({
  name: 'XyI18n'
})

const { config } = toRefs(configStore)
const { locale } = useI18n()
const settingOper = (lang: string) => ((locale.value = lang), (config.value.locale = lang))

const changeStyle = (lang: string) => locale.value === lang && 'color: rgb(var(--color-primary)); font-weight: bolder;'
</script>

<template>
  <el-dropdown
    popperClass="com-xyI18n"
    trigger="click"
    class="com-xyI18n"
    :popperOptions="{
      modifiers: [
        {
          name: 'offset',
          options: {
            offset: [0, 20]
          }
        }
      ]
    }"
    @command="settingOper"
  >
    <div class="layout-header-right-icon">
      <XyIcon icon="material-symbols:translate-rounded" />
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="c in langType" :key="c" :style="changeStyle(c)" :command="c">
          {{ c }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<!-- 为了在app外修改样式，给popper添加类名，除特殊情况勿在此处添加样式 -->
<style lang="scss">
.com-xyI18n {
  cursor: pointer;
  .el-dropdown-menu__item {
    padding: pxToRem(4) 0;
    font-size: pxToRem(14);
    width: pxToRem(90);
    justify-content: center;
  }
}
</style>
